<template>
  <div class="inner-tool">
    <div class="search">
      <input
        class="input"
        v-model="searchWord"
        placeholder="搜索"
        @keyup.enter="searchHanlder"
      />
    </div>
    <div class="list">
      <ul
        v-if="dataList.length"
        v-infinite-scroll="getList"
        infinite-scroll-disabled="disabled"
      >
        <li v-for="item in dataList" :key="item.id" class="tool-name">
          <div class="title">{{ item.toolName }}</div>
          <div class="operate">
            <el-button plain size="mini" @click="send(item)"> 发送 </el-button>
          </div>
        </li>
      </ul>
    </div>
    <!-- <div class="edit">
      <div class="select-node">{{ selectWord.toolName }}</div>
      <el-button @click="send">发送</el-button>
    </div> -->
  </div>
</template>

<script>
import { queryTool } from "@/api/knowlegeBase";
import { mapMutations } from "vuex";
export default {
  name: "inner-toolbase",
  data() {
    return {
      searchWord: "",
      selectWord: {},
      dataList: [],
      pageSize: 1000,
      pageIndex: 1,
      total: 0,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.dataList.length >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapMutations(["setShortcutContent"]),
    getList() {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        searchName: this.searchWord,
      };
      queryTool(params)
        .then((res) => {
          const {
            data: { records, total },
          } = res;
          this.dataList = records;
          this.total = total;
        })
        .catch(() => {
          this.$message.error(`工具库查询异常`);
        });
    },
    searchHanlder() {
      this.getList();
    },
    send(item) {
      const content = JSON.stringify(item);
      const params = { type: 2, txt: content };
      this.setShortcutContent(params);
    },
  },
};
</script>

<style lang="scss" scoped>
.inner-tool {
  margin-top: 10px;
}
.search {
  padding: 0 15px;
  .input {
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding: 0 10px;
    background: #e2e2e2;
    border: 1px solid #e6e6e6;
    border-radius: 1px;
  }
}
.list {
  height: 540px;
  overflow-y: auto;
}
.tool-name {
  padding: 0 15px;
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e6e6e6;
  align-items: center;
  justify-content: space-between;
  .title {
  }
  .operate {
    .el-button {
      padding:2px 10px;
      font-size: 14px;
      color: #1e9fff;
      border-color: #1e9fff;
    }
  }
}
.edit {
  margin-top: 10px;
  height: 40px;
  display: flex;
  .select-node {
    text-align: left;
    padding: 0 10px;
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 40px;
    color: #999;
  }
}
.loading-tip {
  font-size: 12px;
}
</style>